<template>
    <div class="table">
      
         <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    运营管理
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>资讯公告</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-button type='primary' @click='addNotice' icon='el-icon-plus' class="handle-del mr10 ">新增公告</el-button> 
            <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
            <el-select v-model="params.type" placeholder="筛选分类" class="handle-select mr10">
                <el-option label="全部分类" value=""></el-option>
                <el-option v-for="(type_item,index) in typeCenter" :key="index" :label="type_item.name" :value="type_item.code"></el-option>
            </el-select>
            <!-- <el-input v-model="params.keywords" placeholder="筛选关键词" class="handle-input mr10"></el-input> -->
            <el-button type="primary" icon="search" @click="getList">搜索</el-button>
        </div>
        <el-table :data="newsCenter" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="title" label="标题" >
            </el-table-column>
            <el-table-column prop="type" label="分类"  width="160">
                <template slot-scope='scope'>
                    {{scope.row.type==0?'系统消息':scope.row.type==1?'公告消息':scope.row.type==2?"购买反馈":"提现通知"}}
                </template>
            </el-table-column>
            <el-table-column prop="createTime"  sortable  label="发布时间"  width="240">
                <template slot-scope='scope'>
                    {{scope.row.createTime}}
                </template>
            </el-table-column>
             <!-- <el-table-column prop="a_state"   :formatter="publish_formatter"  label="发布" width="120">
            </el-table-column> -->
         
            <el-table-column label="操作" width="250" >
                <template scope="scope">
                     <!-- <el-button size="small" :type="scope.row.a_top>0?'info':'warning'"
                            @click="handleInTop(scope.row)" v-text="scope.row.a_top>0?'取消置顶':'置顶'"></el-button> -->
                    <el-button size="small"
                            @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                :page-size="params.size"
                @current-change ="handleCurrentChange"
                layout="prev, pager, next"
                :total="all_page">
            </el-pagination>
        </div>
        <loading v-if="loading" :tip='tip'></loading>
        <el-dialog
        :title="addTitle"
        style="text-align: center;"
        :visible.sync="dialogVisible"
        width="95%"
        class="myclass"
        :center='true'
        :before-close="handleClose">
            <el-form :model="editParams" ref="ruleForm" class="demo-ruleForm">
                <el-form-item label="标题" style="text-align: left;">
                    <el-input v-model="editParams.title" style="width:80%;"></el-input>
                </el-form-item>
                <el-form-item label="内容" style="margin-top:20px;text-align: left;">
                </el-form-item>
                <el-form-item>
                    <quill-editor
                    @ready="onEditorReady($event)"
                    ref="rpEditor"  v-model="editParams.content" :options="editorOption">
                        
                    </quill-editor>
                  <input style="display: none" type="file" name="avator" id="fileID"
                           accept="image/jpg,image/jpeg,image/png,image/gif" ref='upload' @change='change'/>
                </el-form-item>
                <el-form-item label="类型" style="margin-top:20px;text-align: left;">
                    <el-radio-group v-model="editParams.type" size="small">
                        <el-radio-button label="0">系统消息</el-radio-button>
                        <el-radio-button label="1">公告消息</el-radio-button>
                        <el-radio-button label="2">购买反馈</el-radio-button>
                        <el-radio-button label="3">提现通知</el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editEnter(editParams.edit)">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="提示"
            :visible.sync='delModal'
            width='30%'
        >
        <span>您确定要删除公告吗？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="delModal = false">取 消</el-button>
            <el-button type="primary" @click="enterDel(all)">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import * as rpConfig from '../../../../rpConfig/constant';
import { HttpReq } from '../../../service/server';
import {api,apiGet,apiPut,apiDelete} from '@/api/index';
import loading from "@/components/common/loading.vue";
import { quillEditor } from "vue-quill-editor";
var Server = new HttpReq();
export default {
    data() {
        return {
            all:false,
            addTitle:'',
            delModal:false,
            delData:{},
            tip:'',//loading页面的提示信息
            ruleForm:{},
            rules:[],
            dialogVisible:false,
            loading:false,
            editId:'',
            editParams:{
                title:'',
                content:'',
                type:'0',
                edit:'',
            },
            params:{
                page:0,
                size:5,
                id:'',//公告信息标识
                type:'',//公告类型 公告类型{系统消息=0, 公告消息=1, 购买反馈=2, 提现通知=3}
                types:[],//公告类型-数组
                lastId:'',//最后标识
                // keywords:'',
            },
            editorOption: {
                placeholder: "请输入文章内容"
                // something config
            },
            newsCenter: [],
            typeCenter: [
                {
                    code:0,
                    name:'系统消息'
                },
                {
                    code:1,
                    name:'公告消息'
                },
                {
                    code:2,
                    name:'购买反馈'
                },{
                    code:3,
                    name:'提现通知'
                }
            ],
            cur_page: 1,
            all_page: 1,
            multipleSelection: [],
            select_cate: '',
            select_word: '',
            del_list: [],
            is_search: false
        }
    },
    created() {
        
    },
    components: {
      loading,
      quillEditor
    },
    
    computed: {},
    methods: {
        onEditorReady(e){
            //console.log(e)
            this.$refs.rpEditor.quill.getModule("toolbar").addHandler('image',this.handleImg);
        },
        handleImg(){
            //console.log('点击了上传')
            var self=this;
            let file=document.querySelector('#fileID')
            file.click();
            file.onchange=function(){
                let files=this.files[0];
                // //console.log(this.files[0]);
                var reader=new FileReader();
                reader.readAsDataURL(files);
                reader.onload=function(){
                    // //console.log(this.result)
                    var params={
                        data:this.result,
                        filename:files.name,
                    }
                    api.file.fileImg(params).then(res=>{
                        var img=document.createElement('img');
                        // img.width='100%';
                        // img.className='textImg-quill';
                        // img.style.width='100%';
                        img.src=res.url;
                        //console.log(self.$refs.rpEditor.quill.container)
                        self.$refs.rpEditor.quill.container.querySelector('.ql-editor').appendChild(img);
                    })
                }
                this.value="";
            }
        },
        change(){
            
        },
        warning(msg){
            this.$message({message:msg ,type: 'warning'});
        },
        editEnter(type){
            if(!this.editParams.title){
                return this.warning('未填写标题')
            }
            if(!this.editParams.content){
                return this.warning('未填写公告内容');
            }
            this.loading=true;
            //console.log(this.editParams);
            if(this.editParams.edit=='edit'){
                this.tip='提交公告编辑';
                apiPut.notice.noticeList(this.editId,this.editParams).then(res=>{//编辑提交
                    //console.log(res);
                    this.loading=false;//loading隐藏
                    this.dialogVisible=false;//模态框隐藏
                    this.getList();//重新渲染页面
                    this.$message({message:'操作成功',type:'success'});//消息成功提示
                    this.editParams={//模态框内容置空
                        title:'',
                        content:'',
                        type:'0',
                    }
                })
            }else{
                this.tip="添加公告中";
                api.notice.noticeList(this.editParams).then(res=>{
                    //console.log(res);
                    this.loading=false;
                    this.dialogVisible=false;
                    this.$message({message:'操作成功',type:'success'})
                    this.getList();
                    this.editParams={//模态框内容置空
                        title:'',
                        content:'',
                        type:'0',
                    }
                })
            }
        },
        enterDel(all){
            if(all){//如果是批量删除
                this.multipleSelection.forEach((item,i)=>{
                    this.loading=true;
                    this.tip='删除中';
                    apiDelete.notice.noticeList(item.id,{}).then(res=>{
                        // //console.log(res);
                        this.loading=false;
                        // this.$message({message:'操作成功',mock:''});
                        this.getList();
                    })
                    this.delModal=false;
                })
            }else{//不是批量删除
                this.loading=true;
                this.tip='删除公告中';
                apiDelete.notice.noticeList(this.delData.id,{}).then(res=>{
                    //console.log(res);
                    this.loading=false;
                    this.delModal=false;
                    this.$message({message:'操作成功',mock:''});
                    this.getList();
                })
            }
        },
        handleClose(){
            this.dialogVisible=false;
            this.editParams={//模态框内容置空
                title:'',
                content:'',
                type:'0',
                edit:'',
            }
        },
        handleCurrentChange(val) {
            this.cur_page = val
            // this.getData()
            this.params.page=val-1;
            this.getList();
        },
        addNotice(){
            this.editParams.edit='add';//打开添加模态框
            this.dialogVisible=true;
            this.addTitle='新增公告';
            //console.log(this.editParams.edit)
        },
        getData() {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/newscenter.Index/getNewsByCon',
                {
                    page: self.cur_page,
                    a_type_id: self.select_cate,
                    keyword: self.select_word
                },
                function(res) {
                    self.newsCenter = res.data.data
                    self.all_page = Math.ceil(res.data.num / res.data.pagesize) * 10
                }
            )
        },
        getType() {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/newscenter.Index/getNewsType',
                {},
                function(response) {
                    self.typeCenter = response.data
                }
            )
        },
        time_filter(row) {
            // return row.a_publish_time.substring(0, 16)
        },
        publish_formatter(row) {
            // return row.a_state == 1 ? '上线内容' : '草稿'
        },
        filterTag(value, row) {
            return row.tag === value
        },
        handleEdit(row) {
            this.editParams.edit='edit';
            //console.log(this.editParams.edit)
            this.addTitle='编辑公告';
            this.editId=row.id;
            this.tip='获取公告详情';
            this.loading=true;
            apiGet.notice.noticeList({},true,this.editId).then(res=>{
                //console.log(res);
                this.dialogVisible=true;
                this.editParams.content=res.content;
                this.editParams.title=res.title;
                this.editParams.type=res.type;
                this.loading=false;
            })
            // this.$router.push({path:'/NewsEdit', query: {newsId:row.id}});
            //this.$message('编辑第' + (index + 1) + '行')
            
        },
        handleInTop(row) {
            let self = this
            Server._POST(
                rpConfig.API_URI + '/newscenter.Index/setInTop',
                { item_id: row.a_id, a_top: row.a_top },
                function(response) {
                    self.$message.success(response.msg)
                    self.getData()
                }
            )
        },
        handleDelete(row) {
            let self = this
            this.delData=row;
            this.delModal=true;
            this.all=false;//不是批量删除按钮
            // Server._POST(
            //     rpConfig.API_URI + '/newscenter.Index/deleteNewsItem',
            //     { item_id: [row.a_id] },
            //     function(response) {
            //         self.$message.success(response.msg)
            //         self.getData()
            //     }
            // )
        },
        delAll() {
            // const self = this;
            this.all=true;
            if(this.multipleSelection.length){
                this.delModal=true;
            }
            
            //     length = self.multipleSelection.length
            // let delArr = []
            // for (let i = 0; i < length; i++) {
            //     delArr.push(self.multipleSelection[i].a_id)
            // }
            // if (delArr.length == 0) {
            //     self.$message.info('请选择要删除的记录')
            // } else {
            //     Server._POST(
            //         rpConfig.API_URI + '/newscenter.Index/deleteNewsItem',
            //         { item_id: delArr },
            //         function(response) {
            //             self.$message.success(response.msg)
            //             self.getData()
            //         }
            //     )
            // }

            // self.multipleSelection = []
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
            //console.log(val);
        },
        getList(){
            this.tip='获取公告列表'
            this.loading=true;
            apiGet.notice.noticeList(this.params).then(res=>{
                //console.log(res);
                this.loading=false;
                this.all_page=res.totalElements;
                this.newsCenter=res.content;
            })
        },
    },
    mounted () {
        this.getList();
    }
}
</script>

<style scoped>
.textImg-quill{
    width: 100%;
}
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
</style>